<template>
  <div class="wrap">
    <div class="status">
      <Image :name="statusIcon(info.state)" class="icon" oss size="110" />
      <div style="font-weight: bold">{{ info.state }}</div>
    </div>
    <div class="info">
      <LabelAndValue :value="info.customerName" height="68" label="顾客姓名" />
      <LabelAndValue :value="info.appointmentTime" height="68" label="预约日期" />
      <LabelAndValue :value="info.hospitalName" height="68" label="预约医院" :value-style="{color: 'rgba(0,0,0,0.85)', fontWeight: '500', fontSize: '14px'}">
        <div style="width: 100%;height: 34px;display: flex;flex-direction: row-reverse;align-items: center;">
          {{ info.hospitalName }}<Icon name="icon-fangzi222" size="52rpx" />
        </div>
      </LabelAndValue>
      <LabelAndValue :value="info.projectName" height="68" label="预约项目" />
    </div>
    <div class="tip">
      <Icon name="icon-audit_progress_bohui" size="28" style="margin-right: 6px;transform: rotate(180deg)" />
      实际交易将由您名下工作室具体情况执行
    </div>
    <div class="step">
      <div class="title">预约进度</div>
      <div class="step_line">
        <div :style="{backgroundColor: info.state === '已到院' ? '#2dc76d' : ''}" class="round" />
        <div class="line" />
        <div :style="{backgroundColor: '#2dc76d'}" class="round" />
      </div>
      <div class="come_to_hospital">
        <span :style="{color: info.state === '已到院' ? '#2dc76d' : ''}">顾客到院接待</span>
        <span class="date">{{ info.arriveTime }}</span>
      </div>
      <div class="subscribe_ok">
        <span :style="{color: '#2dc76d'}">顾客预约成功</span>
        <span class="date">{{ info.auditTime }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LabelAndValue from '@C/LabelAndValue.vue'
import { onLoad, onShow, Router } from '@U/common'
import { weixinSubscription } from '@U/Auth'
import { reactive } from 'vue'
import Image from '@C/Image.vue'
import Icon from '@C/Icon.vue'
import type { IObj } from '@/interface'

onLoad(() => {
  const data = Router.route().params
  Object.keys(data).forEach((key: string) => {
    info[key] = data[key] ?? '--'
  })
})

const statusIcon = (key: string) => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/gl_subscribe_info_${key === '已到院' ? '4' : '3'}.png`

const info = reactive(<IObj>{
  appointmentId: '', // 预约id
  customerName: '', // 顾客姓名
  customerMobile: '', // 顾客手机号
  hospitalName: '', // 医院名称
  projectName: '', // 预约项目名称
  appointmentTime: '', // 预约时间
  auditTime: '', // 企业审核时间
  state: '', // 预约状态
  arriveTime: '', // 到院时间
})
onShow(() => {
  weixinSubscription()
})
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .status, .info, .step {
    width: 686rpx;
    background: white;
    border-radius: 24rpx;
    margin-bottom: 28rpx;
    overflow: hidden;
  }
  .status {
    margin-top: 28rpx;
    height: 222rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #262626;
    .icon {
      width: 110rpx;
      height: 110rpx;
      overflow: hidden;
      margin-bottom: 16rpx;
    }
  }
  .info {
    padding: 16rpx;
    margin-bottom: 16rpx;
  }
  .tip {
    height: 40rpx;
    margin-bottom: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    color: #8c8c8c;
    font-size: 24rpx;
  }
  .step {
    height: 324rpx;
    padding: 28rpx 32rpx;
    position: relative;
    .title {
      font-size: 32rpx;
      color: #262626;
      margin-bottom: 42rpx;
    }
    .come_to_hospital, .subscribe_ok {
      color: #8c8c8c;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      padding-left: 112rpx - 32rpx;
      .date {
        font-size: 24rpx;
      }
    }
    .come_to_hospital {
      margin-bottom: 82rpx;
    }

    .step_line {
      position: absolute;
      left: 52rpx;
      top: 120rpx;
      width: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .round {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #dbdbdb;
      }
      .line {
        height: 98rpx;
        width: 4rpx;
        background: #dbdbdb;
      }
    }
  }
}
</style>
